<template>
  <div>
    <div class="login-head">
      <div class="head-logo"><img src="../assets/logo.png" alt="" /></div>
      <div class="webLogin">欢迎加入</div>
    </div>
    <el-card class="box-card">
      <el-tabs type="border-card">
        <el-tab-pane label="公司注册">
          <el-form
            :model="regietorBank"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="公司名称:" prop="companyName">
              <el-input
                type="text"
                v-model="regietorBank.companyName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="你的姓名:" prop="username">
              <el-input
                type="text"
                v-model="regietorBank.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密 码:" prop="password">
              <el-input
                type="password"
                v-model="regietorBank.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="phone">
              <el-input
                type="text"
                v-model="regietorBank.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮 箱:" prop="email">
              <el-input
                type="text"
                v-model="regietorBank.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="companyRegietorHandle('regietorBank')"
                >注 册</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="新人注册">
          <el-form
            :model="personageRegietor"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓 名:" prop="uname">
              <el-input
                type="text"
                v-model="personageRegietor.uname"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="upwd">
              <el-input
                type="password"
                v-model="personageRegietor.upwd"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="uphone">
              <el-input
                type="text"
                v-model="personageRegietor.uphone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮 箱:" prop="uemail">
              <el-input
                type="text"
                v-model="personageRegietor.uemail"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="block">
              <span class="demonstration">婚 期:</span>
              <el-date-picker
                v-model="value1"
                type="date"
                style="margin-left: 20px"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
            <el-form-item style="margin-top: 10px">
              <el-button
                type="primary"
                @click="personageRegietorHandle('personageRegietor')"
                >注 册</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <div style="text-align: center">
          已有账号？<router-link to="/login">点击登录</router-link>
        </div>
      </el-tabs>
    </el-card>
    <Footer />
  </div>
</template>

<script>
import api from "../api/";
import Footer from "../components/Footer";
export default {
  name: "Reagister",
  components: { Footer },
  data() {
    return {
      regietorBank: {
        companyName: "", //公司名称
        username: "", //用户姓名
        password: "", //密码
        phone: "", //手机号
        email: "", //邮箱
      },
      personageRegietor: {
        uname: "", //个人姓名
        upwd: "", //密码
        uphone: "", //手机号
        uemail: "", //邮箱
      },
      value1: "",
    };
  },
  methods: {
    /**
     * 公司注册
     */
    companyRegietorHandle() {
      api
        .getCompanyRegister({
          cname: this.regietorBank.companyName,
          ceo: this.regietorBank.username,
          cpwd: this.regietorBank.password,
          cphone: this.regietorBank.phone,
          cemail: this.regietorBank.email,
        })
        .then((res) => {
          // console.log(res);
          if (res.status == 200) {
            this.$message.success(res.data.msg);
            this.$router.push("/");
          } else {
            this.$message.error(res.data.errors);
          }
        });
    },
    /**
     * 个人注册
     */
    personageRegietorHandle() {
      console.log(this.value1);
      api
        .getMarryPerson({
          pname: this.personageRegietor.uname,
          ppwd: this.personageRegietor.upwd,
          pphone: this.personageRegietor.uphone,
          pemail: this.personageRegietor.uemail,
          marrydate: new Date(this.value1)
            .toLocaleDateString()
            .replace(/\//g, "-"),
        })
        .then((res) => {
          // console.log(res);
          if (res.status == 200) {
            this.$message.success(res.data.msg);
            // this.$router.push("/login");
          } else {
            this.$message.error(res.data.errors);
          }
        });
    },
  },
};
</script>

<style scoped lang="less" >
.box-card {
  width: 600px;
  margin: 100px auto;
}
.block {
  padding-left: 40px;
  // text-align: center;
}
.login-head {
  background: #fff;
  height: 120px;
  overflow: hidden;
  .head-logo {
    margin-left: 100px;
    float: left;
  }
  .webLogin {
    float: left;
    font-size: 30px;
    font-weight: bold;
    line-height: 120px;
    margin-left: 10px;
    color: #555;
  }
}
</style>